<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2">
			</div>
		</div>
	</body>
</html>
<style type="text/css">
	.box1{
		width: 200px;
		height: 200px;
		background-color: #bfa;
	}
/* 	.box1::before{
		content:'';
		display: table;
	} */
	.box2{
		width: 100px;
		height: 100px;
		background-color: #FF0000;
		margin-top: 100px;
	}
	
	/* clearfix样式可以同时解决高度塌陷和外边距重叠问题 */
	.clearfix::before,.clearfix::after{
		content: '';
		display: table;
		clear: both;
	}
</style>